<!--
 * @description: 视频播放器 
 * @Author: jhw
 * @Date: 2023-07-23 21:07:06
 * @LastEditors: jhw
 * @LastEditTime: 2024-01-02 15:20:17
-->
<template>
  <div>
    <h1>视频播放器</h1>
    <video
      ref="video"
      src="https://v.itheima.net/LapADhV6.mp4"
      controls
      @timeupdate="handleTimeupdate"
      @loadeddata="handleLoadeddata"
    ></video>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import _ from 'lodash';

const video = ref<HTMLVideoElement>();

// 监听视频播放进度
const handleTimeupdate = _.throttle(() => {
  // 本地存储
  localStorage.setItem('videoTime', video.value?.currentTime.toString() as string);
}, 1000);

const handleLoadeddata = () => {
  // 读取本地存储
  const videoTime = localStorage.getItem('videoTime');
  if (videoTime !== 'undefined' && video.value) {
    video.value.currentTime = parseFloat(videoTime as string);
  }
};
</script>

<style scoped></style>
